<template>
  <v-scale-screen full-screen width="1920" style="overflow: hidden" class="p-main" height="1080">
    <div class="p-con">
      <div class="p-head">
        <div class="headTitle" />
        <div class="headTime">
          <div>
            <span class="headPage1 headPage2" @click="changePage('/home/index')"><span>首页</span></span>
            <span class="headPage1"><span>总经济活力发展趋势回溯</span></span>
            <span class="headPage1 headPage2" @click="changePage('/trumpet/index')"><span>一带一路国家投资风险指数</span></span>
          </div>
          <div style="display: flex">
            <div v-if="weatherCurrent.weather" class="weather-box">
              <img :src="require('@/assets/images/icon_weather/'+weatherCurrent.weather+'.png')" alt="">
              {{ weatherCurrent.temperature }}℃
            </div>
            <p class="headPage3">
              {{ time | monthFilter }}
            </p>
          </div>
        </div>
      </div>
      <div class="p-win">
        <div class="p-left">
          <div class="card-title">
            <p class="card-title-text">
              经济活力指数
            </p>
          </div>
          <div class="p-left-top">
            <div class="p-left-card p-left-card-2">
              <div class="p-left-card-head">
                <div class="p-left-card-head-text">
                  <img class="img1" :src="require('@/assets/images/p/b7.png')" alt="">
                  <p class="card-title-text" style="cursor: pointer" @mouseenter="showTip('1')" @mouseleave="hideTip1('1')">
                    农业生产力活力指数
                  </p>
                </div>
                <div v-if="showTip1" class="p-left-card-head-value">
                  <p style="margin-right: 4px">
                    同比
                  </p>
                  <p class="p-left-card-head-value-p1">
                    <img v-if="agricultureOne.on_year>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="agricultureOne.on_year<0" src="@/assets/images/p/b21.png" alt="">{{ agricultureOne.on_year }}%
                  </p>
                  <img style="margin: 0 4px" class="img1" :src="require('@/assets/images/p/b13.png')" alt="">
                  <p style="margin-right: 4px">
                    环比
                  </p><p class="p-left-card-head-value-p" style="display: flex;align-items: center" :style="{color: agricultureOne.chain>0?'rgba(10, 255, 143, 0.7)':agricultureOne.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="agricultureOne.chain>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="agricultureOne.chain<0" src="@/assets/images/p/b21.png" alt="">{{ agricultureOne.chain }}%
                  </p>
                </div>
                <el-date-picker
                  v-else
                  v-model="value3"
                  type="year"
                  value-format="yyyy"
                  :popper-class="'custom-date-picker-popup'"
                  @change="handleAgricultureChange"
                />
              </div>
              <div style="height: 160px;display: flex;justify-content: space-between">
                <div style="width: 350px;height: 160px;">
                  <line1-chart v-if="agricultureData.data.data2.length>0" :chart-data="agricultureData" />
                </div>
                <div class="se-info" style="width: 66px;height: 160px;">
                  <div class="se-info-1" :style="{color: agricultureOne.chain>0?'rgba(10, 255, 143, 0.7)':agricultureOne.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="agricultureOne.chain>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="agricultureOne.chain<0" src="@/assets/images/p/b21.png" alt="">{{ agricultureOne.chain }}%
                  </div>
                  <div class="se-info-2">
                    同比
                  </div>
                  <div class="se-info-3" />
                  <div class="se-info-4" style="display: flex;align-items: center" :style="{color: agricultureOne.on_year>0?'rgba(10, 255, 143, 0.7)':agricultureOne.on_year<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="agricultureOne.on_year>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="agricultureOne.on_year<0" src="@/assets/images/p/b21.png" alt="">{{ agricultureOne.on_year }}%
                  </div>
                  <div class="se-info-5">
                    环比
                  </div>
                </div>
              </div>
            </div>
            <div class="p-left-card p-left-card-2">
              <div class="p-left-card-head" style="align-items: center">
                <div class="p-left-card-head-text">
                  <img class="img1" :src="require('@/assets/images/p/b7.png')" alt="">
                  <p class="card-title-text" style="cursor: pointer" @mouseenter="showTip('2')" @mouseleave="hideTip1('2')">
                    工业智造园活力指数
                  </p>
                </div>
                <div v-if="showTip2" class="p-left-card-head-value">
                  <p style="margin-right: 4px">
                    同比
                  </p>
                  <p class="p-left-card-head-value-p1">
                    <img v-if="manufactureOne.on_year>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="manufactureOne.on_year<0" src="@/assets/images/p/b21.png" alt="">{{ agricultureOne.on_year }}%
                  </p>
                  <img style="margin: 0 4px" class="img1" :src="require('@/assets/images/p/b13.png')" alt="">
                  <p style="margin-right: 4px">
                    环比
                  </p>
                  <p class="p-left-card-head-value-p" style="display: flex;align-items: center" :style="{color: manufactureOne.chain>0?'rgba(10, 255, 143, 0.7)':manufactureOne.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="manufactureOne.chain>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="manufactureOne.chain<0" src="@/assets/images/p/b21.png" alt="">{{ manufactureOne.chain }}%
                  </p>
                </div>
                <el-date-picker
                  v-else
                  v-model="manufactureYear"
                  type="year"
                  value-format="yyyy"
                  :popper-class="'custom-date-picker-popup'"
                  @change="handleManufactureChange"
                />
              </div>
              <div style="height: 160px;display: flex;justify-content: space-between">
                <div style="width: 350px;height: 160px;">
                  <line1-chart v-if="manufactureData.data.data2.length>0" :chart-data="manufactureData" />
                </div>
                <div class="se-info" style="width: 66px;height: 160px;">
                  <div class="se-info-1" :style="{color: manufactureOne.chain>0?'rgba(10, 255, 143, 0.7)':manufactureOne.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="manufactureOne.chain>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="manufactureOne.chain<0" src="@/assets/images/p/b21.png" alt="">{{ manufactureOne.chain }}%
                  </div>
                  <div class="se-info-2">
                    同比
                  </div>
                  <div class="se-info-3" />
                  <div class="se-info-4" style="display: flex;align-items: center" :style="{color: manufactureOne.on_year>0?'rgba(10, 255, 143, 0.7)':manufactureOne.on_year<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="manufactureOne.on_year>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="manufactureOne.on_year<0" src="@/assets/images/p/b21.png" alt="">{{ manufactureOne.on_year }}%
                  </div>
                  <div class="se-info-5">
                    环比
                  </div>
                </div>
              </div>
            </div>
            <div class="p-left-card p-left-card-2">
              <div class="p-left-card-head" style="align-items: center">
                <div class="p-left-card-head-text">
                  <img class="img1" :src="require('@/assets/images/p/b7.png')" alt="">
                  <p class="card-title-text" style="cursor: pointer" @mouseenter="showTip('3')" @mouseleave="hideTip1('3')">
                    服务业活力指数
                  </p>
                </div>
                <div v-if="showTip3" class="p-left-card-head-value">
                  <p style="margin-right: 4px">
                    同比
                  </p>
                  <p class="p-left-card-head-value-p1">
                    <img v-if="serviceOne.on_year>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="serviceOne.on_year<0" src="@/assets/images/p/b21.png" alt="">{{ serviceOne.on_year }}%
                  </p>
                  <img style="margin: 0 4px" class="img1" :src="require('@/assets/images/p/b13.png')" alt="">
                  <p style="margin-right: 4px">
                    环比
                  </p>
                  <p class="p-left-card-head-value-p" style="display: flex;align-items: center" :style="{color: serviceOne.chain>0?'rgba(10, 255, 143, 0.7)':serviceOne.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="serviceOne.chain>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="serviceOne.chain<0" src="@/assets/images/p/b21.png" alt="">{{ serviceOne.chain }}%
                  </p>
                </div>
                <el-date-picker
                  v-else
                  v-model="serviceYear"
                  type="year"
                  value-format="yyyy"
                  :popper-class="'custom-date-picker-popup'"
                  @change="handleServiceChange"
                />
              </div>

              <div style="height: 160px;display: flex;justify-content: space-between">
                <div style="width: 350px;height: 160px;">
                  <line1-chart v-if="serviceData.data.data2.length>0" :chart-data="serviceData" />
                </div>
                <div class="se-info" style="width: 66px;height: 160px;">
                  <div class="se-info-1" :style="{color: serviceOne.chain>0?'rgba(10, 255, 143, 0.7)':serviceOne.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="serviceOne.chain>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="serviceOne.chain<0" src="@/assets/images/p/b21.png" alt="">{{ serviceOne.chain }}%
                  </div>
                  <div class="se-info-2">
                    同比
                  </div>
                  <div class="se-info-3" />
                  <div class="se-info-4" style="display: flex;align-items: center" :style="{color: serviceOne.on_year>0?'rgba(10, 255, 143, 0.7)':serviceOne.on_year<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 0.7)'}">
                    <img v-if="serviceOne.on_year>0" src="@/assets/images/p/b12.png" alt="">
                    <img v-if="serviceOne.on_year<0" src="@/assets/images/p/b21.png" alt="">{{ serviceOne.on_year }}%
                  </div>
                  <div class="se-info-5">
                    环比
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-left-center">
            <div class="p-left-center-box">
              <div class="p-left-center-card pc1" :class="[mouseIndex===0?'p-left-center-card-1 pc0':'']" @mouseenter="handleMouseEnter(0)" @mouseleave="handleMouseLeave(0)">
                <p class="card-title-text">
                  城际联动活力指数
                </p>
                <div style="height: 160px;">
                  <line2-chart :chart-data="intercityData" />
                </div>
              </div>
              <div class="p-left-center-card pc2" :class="[mouseIndex===1?'p-left-center-card-1 pc4':'']" @mouseenter="handleMouseEnter(1)" @mouseleave="handleMouseLeave(1)">
                <p class="card-title-text">
                  仓储贸易活力指数
                </p>
                <div style="height: 160px;">
                  <line2-chart :chart-data="storageData" />
                </div>
              </div>
              <div class="p-left-center-card pc3" :class="[mouseIndex===2?'p-left-center-card-1 pc0':'']" @mouseenter="handleMouseEnter(2)" @mouseleave="handleMouseLeave(2)">
                <p class="card-title-text">
                  商业服务活力指数
                </p>
                <div style="height: 160px;">
                  <line2-chart :chart-data="businessData" />
                </div>
              </div>
              <div class="p-left-center-card" :class="[mouseIndex===3?'p-left-center-card-1 pc4':'']" @mouseenter="handleMouseEnter(3)" @mouseleave="handleMouseLeave(3)">
                <p class="card-title-text">
                  科创及服务活力指数
                </p>
                <div style="height: 160px;">
                  <line2-chart :chart-data="scienceData" />
                </div>
              </div>
            </div>
          </div>
          <div class="p-left-bottom">
            <div class="p-left-bottom-card">
              <div style="display: flex;justify-content: space-between">
                <div style="display: flex">
                  <div
                    class="p-left-bottom-card-tab"
                    :class="{'p-left-bottom-card-tab-active':isActiveOne === 'chengji'}"
                    @click="setActiveOne('chengji')"
                  >
                    <p :class="{'active-text': isActiveOne === 'chengji'}">
                      城际联动活力指数溯源
                    </p>
                  </div>
                  <div
                    class="p-left-bottom-card-tab"
                    :class="{'p-left-bottom-card-tab-active':isActiveOne === 'cangcu'}"
                    @click="setActiveOne('cangcu')"
                  >
                    <p :class="{'active-text': isActiveOne === 'cangcu'}">
                      仓储贸易活力指数溯源
                    </p>
                  </div>
                </div>

                <div v-if="isActiveOne === 'chengji'" class="p-left-bottom-card-type">
                  <img class="img1" :src="require('@/assets/images/p/b16.png')" alt="">
                  绕城高速
                  <img class="img1" :src="require('@/assets/images/p/b17.png')" alt="">
                  机场
                </div>
                <div v-else class="p-left-bottom-card-type">
                  <img class="img1" :src="require('@/assets/images/p/b16.png')" alt="">
                  水运指数
                  <img class="img1" :src="require('@/assets/images/p/b17.png')" alt="">
                  陆运指数
                  <img class="img1" :src="require('@/assets/images/p/b18.png')" alt="">
                  物流指数
                </div>
              </div>
              <div v-if="isActiveOne === 'chengji'" style="height: 226px;">
                <line3-chart key="chengji" :chart-data="intercityData" />
              </div>
              <div v-if="isActiveOne === 'cangcu'" style="height: 226px;">
                <line4-chart key="cangcu" :chart-data="storageData" />
              </div>
            </div>
            <div class="p-left-bottom-card">
              <div style="display: flex;justify-content: space-between">
                <div style="display: flex">
                  <div
                    class="p-left-bottom-card-tab"
                    :class="{'p-left-bottom-card-tab-active': isActive === 'business'}"
                    @click="setActive('business')"
                  >
                    <p :class="{'active-text': isActive === 'business'}">
                      商业服务活力指数溯源
                    </p>
                  </div>
                  <div
                    class="p-left-bottom-card-tab"
                    :class="{'p-left-bottom-card-tab-active': isActive === 'innovation'}"
                    @click="setActive('innovation')"
                  >
                    <p :class="{'active-text': isActive === 'innovation'}">
                      科创级服务活力指数溯源
                    </p>
                  </div>
                </div>
              </div>
              <div v-if="isActive === 'business'" style="display: flex;justify-content: space-between;padding: 0 8px;">
                <div style="width: 143px;">
                  <div class="bus-head">
                    <div />
                    <div style="width: 50px">
                      同比
                    </div>
                    <div style="width: 50px">
                      环比
                    </div>
                  </div>
                  <div class="move-con2" style="height: 165px;overflow: hidden;">
                    <div class="move-body2">
                      <div v-for="(item, index) in businessList1" :key="index" class="bus-container">
                        <div>{{ item.name }}</div>
                        <div class="bus-bell" :class="[item.on_year>0?'bus-bell2':'']">
                          {{ item.on_year }}%
                        </div>
                        <div class="bus-bell" :class="[item.chain>0?'bus-bell2':'']">
                          {{ item.chain }}%
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="text-align: center;">
                    <el-dropdown trigger="click" @command="monthChange1">
                      <span style="color: #36C4FF;font-size: 12px;line-height: 34px;text-align: center;opacity: 0.7;">
                        {{ mouths[businessList1Index] }}
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item, index) in mouths" :key="index" :command="index">
                          {{ item }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
                <div style="width: 467px;">
                  <div class="table-head table-head2">
                    <div>区</div>
                    <div>指数</div>
                    <div>同比</div>
                    <div>环比</div>
                  </div>
                  <div class="move-con2" style="height: 165px;overflow: hidden;">
                    <div class="move-body2">
                      <div v-for="(item, index) in businessList2" :key="index" class="table-container table-container2">
                        <div>{{ item.name }}</div>
                        <div>{{ item.vitality_index }}</div>
                        <div :style="{color: item.on_year>0?'rgba(10, 255, 143, 0.7)':item.on_year<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                          <img v-if="item.on_year > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                          <img v-if="item.on_year < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                          {{ item.on_year }}%
                        </div>
                        <div :style="{color: item.chain>0?'rgba(10, 255, 143, 0.7)':item.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                          <img v-if="item.chain > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                          <img v-if="item.chain < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                          {{ item.chain }}%
                        </div>
                      </div>
                    </div>
                  </div>

                  <div style="text-align: center;">
                    <el-dropdown trigger="click" @command="monthChange2">
                      <span style="color: #36C4FF;font-size: 12px;line-height: 34px;text-align: center;opacity: 0.7;">
                        {{ mouths[businessList2Index] }}
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item, index) in mouths" :key="index" :command="index">
                          {{ item }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </div>
              <div v-if="isActive === 'innovation'" style="display: flex;justify-content: space-between;padding: 0 8px;">
                <div style="width: 143px;">
                  <div class="bus-head">
                    <div />
                    <div style="width: 50px">
                      同比
                    </div>
                    <div style="width: 50px">
                      环比
                    </div>
                  </div>
                  <div class="move-con2" style="height: 165px;overflow: hidden;">
                    <div class="move-body2">
                      <div v-for="(item, index) in scienceList1" :key="index" class="bus-container">
                        <div>{{ item.name }}</div>
                        <div class="bus-bell" :class="[item.on_year>0?'bus-bell2':'']">
                          {{ item.on_year }}%
                        </div>
                        <div class="bus-bell" :class="[item.chain>0?'bus-bell2':'']">
                          {{ item.chain }}%
                        </div>
                      </div>
                    </div>
                  </div>

                  <div style="text-align: center;">
                    <el-dropdown trigger="click" @command="monthChange3">
                      <span style="color: #36C4FF;font-size: 12px;line-height: 34px;text-align: center;opacity: 0.7;">
                        {{ mouths[scienceList1Index] }}
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item, index) in mouths" :key="index" :command="index">
                          {{ item }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
                <div style="width: 467px;">
                  <div class="table-head table-head2">
                    <div>区</div>
                    <div>指数</div>
                    <div>同比</div>
                    <div>环比</div>
                  </div>
                  <div class="move-con2" style="height: 165px;overflow: hidden;">
                    <div class="move-body2">
                      <div v-for="(item, index) in scienceList2" :key="index" class="table-container table-container2">
                        <div>{{ item.name }}</div>
                        <div>{{ item.vitality_index }}</div>
                        <div :style="{color: item.on_year>0?'rgba(10, 255, 143, 0.7)':item.on_year<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                          <img v-if="item.on_year > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                          <img v-if="item.on_year < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                          {{ item.on_year }}%
                        </div>
                        <div :style="{color: item.chain>0?'rgba(10, 255, 143, 0.7)':item.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                          <img v-if="item.chain > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                          <img v-if="item.chain < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                          {{ item.chain }}%
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="text-align: center;">
                    <el-dropdown trigger="click" @command="monthChange4">
                      <span style="color: #36C4FF;font-size: 12px;line-height: 34px;text-align: center;opacity: 0.7;">
                        {{ mouths[scienceList2Index] }}
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item, index) in mouths" :key="index" :command="index">
                          {{ item }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p-right">
          <div class="p-right-card">
            <div class="p-right-card-head" style="align-items: center">
              <div class="p-right-card-head-text">
                <p class="card-title-text">
                  固定资产投资活力指数
                </p>
              </div>

              <el-date-picker
                v-model="fixed1Year"
                type="year"
                value-format="yyyy"
                :popper-class="'custom-date-picker-popup'"
                @change="fixed1DataChange"
              />
            </div>
            <div style="display: flex;justify-content: space-between;padding: 0 16px;">
              <div style="width: 194px;height: 250px">
                <circle-chart v-if="fixed1Data.data.length > 0" :chart-data="fixed1Data" />
              </div>
              <div style="width: 234px;">
                <div class="table-head">
                  <div style="width: 15%">
                    时间
                  </div>
                  <div style="width: 15%">
                    指数
                  </div>
                  <div style="width: 35%">
                    同比
                  </div>
                  <div style="width: 35%">
                    环比
                  </div>
                </div>
                <div v-for="(item, index) in fixed1List" :key="index" class="table-container" @mouseenter="handleFixed1MouseEnter(index)">
                  <div style="width: 15%">
                    Q{{ item.quarter }}
                  </div>
                  <div style="width: 15%">
                    {{ item.vitality_index }}
                  </div>
                  <div style="width: 35%" :style="{color: item.on_year>0?'rgba(10, 255, 143, 0.7)':item.on_year<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                    <img v-if="item.on_year > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                    <img v-if="item.on_year < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                    {{ item.on_year }}%
                  </div>
                  <div style="width: 35%" :style="{color: item.chain>0?'rgba(10, 255, 143, 0.7)':item.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                    <img v-if="item.chain > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                    <img v-if="item.chain < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                    {{ item.chain }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-right-card">
            <div class="p-right-card-head" style="align-items: center">
              <div class="p-right-card-head-text">
                <p class="card-title-text">
                  地方财政活力指数
                </p>
              </div>

              <el-date-picker
                v-model="fixed2Year"
                type="year"
                value-format="yyyy"
                :popper-class="'custom-date-picker-popup'"
                @change="fixed2DataChange"
              />
            </div>
            <div style="display: flex;justify-content: space-between;padding: 0 16px;">
              <div style="width: 194px;height: 250px">
                <circle-chart v-if="fixed2Data.data.length > 0" :chart-data="fixed2Data" />
              </div>
              <div style="width: 234px;">
                <div class="table-head">
                  <div style="width: 15%">
                    时间
                  </div>
                  <div style="width: 15%">
                    指数
                  </div>
                  <div style="width: 35%">
                    同比
                  </div>
                  <div style="width: 35%">
                    环比
                  </div>
                </div>
                <div v-for="(item, index) in fixed2List" :key="index" class="table-container" @mouseenter="handleFixed2MouseEnter(index)">
                  <div style="width: 15%">
                    Q{{ item.quarter }}
                  </div>
                  <div style="width: 15%">
                    {{ item.vitality_index }}
                  </div>
                  <div style="width: 35%" :style="{color: item.on_year>0?'rgba(10, 255, 143, 0.7)':item.on_year<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                    <img v-if="item.on_year > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                    <img v-if="item.on_year < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                    {{ item.on_year }}%
                  </div>
                  <div style="width: 35%" :style="{color: item.chain>0?'rgba(10, 255, 143, 0.7)':item.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                    <img v-if="item.chain > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                    <img v-if="item.chain < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                    {{ item.chain }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-right-card">
            <div class="p-right-card-head" style="align-items: center">
              <div class="p-right-card-head-text">
                <p class="card-title-text">
                  消费零售活力指数
                </p>
              </div>

              <el-date-picker
                v-model="fixed3Year"
                type="year"
                value-format="yyyy"
                :popper-class="'custom-date-picker-popup'"
                @change="fixed3DataChange"
              />
            </div>
            <div style="display: flex;justify-content: space-between;padding: 0 16px;">
              <div style="width: 194px;height: 250px">
                <circle-chart v-if="fixed3Data.data.length > 0" :chart-data="fixed3Data" />
              </div>
              <div style="width: 234px;">
                <div class="table-head">
                  <div style="width: 15%">
                    时间
                  </div>
                  <div style="width: 15%">
                    指数
                  </div>
                  <div style="width: 35%">
                    同比
                  </div>
                  <div style="width: 35%">
                    环比
                  </div>
                </div>
                <div v-for="(item, index) in fixed3List" :key="index" class="table-container" @mouseenter="handleFixed3MouseEnter(index)">
                  <div style="width: 15%">
                    Q{{ item.quarter }}
                  </div>
                  <div style="width: 15%">
                    {{ item.vitality_index }}
                  </div>
                  <div style="width: 35%" :style="{color: item.on_year>0?'rgba(10, 255, 143, 0.7)':item.on_year<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                    <img v-if="item.on_year > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                    <img v-if="item.on_year < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                    {{ item.on_year }}%
                  </div>
                  <div style="width: 35%" :style="{color: item.chain>0?'rgba(10, 255, 143, 0.7)':item.chain<0?'rgba(255, 72, 72, 1)':'rgba(255, 255, 255, 1)'}">
                    <img v-if="item.chain > 0" class="img1" :src="require('@/assets/images/p/b12.png')" alt="">
                    <img v-if="item.chain < 0" class="img1" :src="require('@/assets/images/p/b21.png')" alt="">
                    {{ item.chain }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="p-foot" />
    </div>
  </v-scale-screen>
</template>

<script>
import CircleChart from './CircleChart'
import Line4Chart from './Line4Chart'
import Line3Chart from './Line3Chart'
import Line2Chart from './Line2Chart'
import Line1Chart from './Line1Chart'
import {
  agricultureChart,
  businessScience,
  exponentList,
  industryChart,
  intercityStorage,
  serviceChart
} from '@/api/prediction'
export default {
  name: 'Index',
  components: {
    CircleChart,
    Line1Chart,
    Line3Chart,
    Line4Chart,
    Line2Chart
  },
  filters: {
    monthFilter(value) {
      if (!value) return ''
      const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      const date = new Date(value)
      if (isNaN(date.getTime())) return '' // 检查日期是否有效
      return months[date.getMonth()]
    }
  },
  data() {
    return {
      mouths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      value3: '2024',
      timer: null,
      isActive: 'business',
      isActiveOne: 'chengji',
      showTip1: false,
      showTip2: false,
      showTip3: false,
      time: new Date().getTime(),
      circle1Data: {
        name: '供需数',
        data: [{
          name: '同比',
          value: 50
        },
        {
          name: '环比',
          value: 20
        }]
      },
      weatherCurrent: {},
      mouseIndex: null,
      mouseClass: '',

      fixed1Year: '2024',
      fixed1List: [],
      fixed1Data: {
        name: '供需数',
        value: 0,
        data: []
      },
      fixed2Year: '2024',
      fixed2List: [],
      fixed2Data: {
        name: '供需数',
        value: 0,
        data: []
      },
      fixed3Year: '2024',
      fixed3List: [],
      fixed3Data: {
        name: '供需数',
        value: 0,
        data: []
      },
      intercityData: {
        name: '城际联动活力指数',
        data: {
          names: [],
          data1: [],
          data2: [],
          data3: [],
          data4: [],
          data5: [],
          data6: [],
          data7: []
        }
      },
      storageData: {
        name: '仓储贸易活力指数溯源',
        data: {
          names: [],
          data1: [],
          data2: [],
          data3: [],
          data4: [],
          data5: [],
          data6: [],
          data7: []
        }
      },
      businessList: [],
      businessList1: [],
      businessList1Index: 0,
      businessList2: [],
      businessList2Index: 0,
      businessData: {
        name: '商业服务活力指数',
        data: {
          names: [],
          data1: [],
          data2: [],
          data3: [],
          data4: [],
          data5: [],
          data7: []
        }
      },

      scienceList: [],
      scienceList1: [],
      scienceList1Index: 0,
      scienceList2: [],
      scienceList2Index: 0,
      scienceData: {
        name: '科创及服务活力指数',
        data: {
          names: [],
          data1: [],
          data2: [],
          data3: [],
          data4: [],
          data5: [],
          data7: []
        }
      },

      agricultureOne: {
        chain: 0,
        on_year: 0
      },
      agricultureYear: '2024',
      agricultureList: [],
      agricultureData: {
        name: '农业生产力活力指数',
        data: {
          valueTime: '2024',
          data1: [],
          data2: []
        }
      },

      manufactureOne: {
        chain: 0,
        on_year: 0
      },
      manufactureYear: '2024',
      manufactureList: [],
      manufactureData: {
        name: '工业智造园活力指数',
        data: {
          valueTime: '2024',
          data1: [],
          data2: []
        }
      },

      serviceOne: {
        chain: 0,
        on_year: 0
      },
      serviceYear: '2024',
      serviceList: [],
      serviceData: {
        name: '服务业活力指数',
        data: {
          valueTime: '2024',
          data1: [],
          data2: []
        }
      }
    }
  },
  mounted() {
    this.showCityInfo()
    this.timer = setInterval(() => {
      this.time = new Date().getTime()
    }, 1000)

    this.fetchFixed1(this.fixed1Year, 1)
    this.fetchFixed2(this.fixed2Year, 2)
    this.fetchFixed3(this.fixed3Year, 3)
    this.fetchIntercity('2024', 1)
    this.fetchIntercity('2024', 2)
    this.fetchBusiness('2024', 1)
    this.fetchBusiness('2024', 2)
    this.handleYearChange1('2024', agricultureChart, 1)
    this.handleYearChange1('2024', industryChart, 2)
    this.handleYearChange1('2024', serviceChart, 3)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    handleAgricultureChange(e) {
      this.handleYearChange1(e, agricultureChart, 1)
    },
    handleManufactureChange(e) {
      this.handleYearChange1(e, industryChart, 2)
    },
    handleServiceChange(e) {
      this.handleYearChange1(e, serviceChart, 3)

      this.fetchIntercity(e, 1)
      this.fetchIntercity(e, 2)
      this.fetchBusiness(e, 1)
      this.fetchBusiness(e, 2)
    },
    async handleYearChange1(value, api, type) {
      const response = await api({
        year: value,
        city: 26
      })
      const data1 = type === 3 ? response.data : response.data.chart

      const responseData = data1.reverse() // 假设接口返回的数据在 response3.data 中
      const value1 = responseData.map((item) => {
        return item.vitality_index
      })
      const value2 = responseData.map((item) => {
        return item.predictive_index
      })
      const name = responseData.map((item) => {
        return 'Q' + item.quarter
      })

      if (type === 1) {
        this.agricultureList = response.data.list
        this.agricultureData.data.name = name
        this.agricultureData.data.data1 = value1
        this.agricultureData.data.data2 = value2
        this.agricultureYear = value
        this.agricultureOne = {
          chain: responseData.length > 0 ? responseData[0].chain : 0,
          on_year: responseData.length > 0 ? responseData[0].on_year : 0
        }
      } else if (type === 2) {
        this.manufactureList = response.data.list
        this.manufactureData.data.name = name
        this.manufactureData.data.data1 = value1
        this.manufactureData.data.data2 = value2
        this.manufactureYear = value
        this.manufactureOne = {
          chain: responseData.length > 0 ? responseData[0].chain : 0,
          on_year: responseData.length > 0 ? responseData[0].on_year : 0
        }
      } else if (type === 3) {
        this.serviceList = response.data.list
        this.serviceData.data.name = name
        this.serviceData.data.data1 = value1
        this.serviceData.data.data2 = value2
        this.serviceYear = value
        this.serviceOne = {
          chain: responseData.length > 0 ? responseData[0].chain : 0,
          on_year: responseData.length > 0 ? responseData[0].on_year : 0
        }
      }
    },
    monthChange1(e) {
      this.businessList1Index = e
      this.businessList1 = []
      businessScience({ year: this.serviceYear, type: 1, city: 26, month: e + 1 }).then(res => {
        this.businessList1 = res.data.list
      })
    },
    monthChange2(e) {
      this.businessList2Index = e
      this.businessList2 = []
      businessScience({ year: this.serviceYear, type: 1, city: 26, month: e + 1 }).then(res => {
        this.businessList2 = res.data.list
      })
    },
    monthChange3(e) {
      console.log(e)
      this.scienceList1Index = e
      this.scienceList1 = []
      businessScience({ year: this.serviceYear, type: 2, city: 26, month: e + 1 }).then(res => {
        this.scienceList1 = res.data.list
      })
    },
    monthChange4(e) {
      this.scienceList2Index = e
      this.scienceList2 = []
      businessScience({ year: this.serviceYear, type: 2, city: 26, month: e + 1 }).then(res => {
        this.scienceList2 = res.data.list
      })
    },
    /** ***商业服务_科创及服务******/
    fetchBusiness(year, type) {
      businessScience({ year: year, type: type, city: 26 }).then(res => {
        const data1 = []
        const data2 = []
        const data3 = []
        const data7 = []
        const names = []
        const resData = res.data.chart.reverse()
        resData.forEach((item, index) => {
          names.push(item.month + '月')
          if (index === 0) {
            data1.push(null)
            data2.push(null)
          } else if (index > 0) {
            data1.push(Number(item.vitality_index) > Number(resData[index - 1].vitality_index) ? 1 : 0)
            data2.push(Number(item.vitality_index) > Number(resData[index - 1].vitality_index) ? 0 : 1)
          }
          data3.push(item.vitality_index)
          data7.push(item.on_year)
        })
        if (type === 1) {
          this.businessData.data.names = names
          this.businessData.data.data1 = data1
          this.businessData.data.data2 = data2
          this.businessData.data.data3 = data3
          this.businessData.data.data7 = data7
          this.businessList = res.data.list
          if (res.data.list.length > 0) {
            const index = res.data.list[res.data.list.length - 1].month - 1
            this.monthChange1(index)
            this.monthChange2(index)
          }
        } else {
          this.scienceData.data.names = names
          this.scienceData.data.data1 = data1
          this.scienceData.data.data2 = data2
          this.scienceData.data.data3 = data3
          this.scienceData.data.data7 = data7
          this.scienceList = res.data.list
          if (res.data.list.length > 0) {
            const index = res.data.list[res.data.list.length - 1].month - 1
            this.monthChange3(index)
            this.monthChange4(index)
          }
        }
      })
    },
    /** ***城际联动_仓储贸易******/
    fetchIntercity(year, type) {
      intercityStorage({ year: year, type: type }).then(res => {
        const data1 = []
        const data2 = []
        const data3 = []
        const data4 = []
        const data5 = []
        const data6 = []
        const data7 = []
        const names = []
        const resData = res.data.reverse()
        resData.forEach((item, index) => {
          names.push(item.month + '月')
          if (index === 0) {
            data1.push(null)
            data2.push(null)
          } else if (index > 0) {
            data1.push(Number(item.vitality_index) > Number(resData[index - 1].vitality_index) ? 1 : 0)
            data2.push(Number(item.vitality_index) > Number(resData[index - 1].vitality_index) ? 0 : 1)
          }

          data3.push(item.vitality_index)
          data4.push(item.high_speed)
          data5.push(item.park_lot)
          data6.push(item.airport)
          data7.push(item.on_year)
        })
        if (type === 1) {
          this.intercityData.data.names = names
          this.intercityData.data.data1 = data1
          this.intercityData.data.data2 = data2
          this.intercityData.data.data3 = data3
          this.intercityData.data.data4 = data4
          this.intercityData.data.data5 = data5
          this.intercityData.data.data7 = data7
        } else {
          this.storageData.data.names = names
          this.storageData.data.data1 = data1
          this.storageData.data.data2 = data2
          this.storageData.data.data3 = data3
          this.storageData.data.data4 = data4
          this.storageData.data.data5 = data5
          this.storageData.data.data6 = data6
          this.storageData.data.data7 = data7
        }
      })
    },
    /** ***消费零售活力指数******/
    fetchFixed3(year, type) {
      exponentList({ year: year, type: type }).then(res => {
        this.fixed3List = res.data
        if (res.data.length > 0) this.handleFixed3MouseEnter(0)
        else {
          this.fixed3Data.data = []
          this.fixed3Data.value = 0
        }
      })
    },
    handleFixed3MouseEnter(index) {
      this.fixed3Data.value = this.fixed3List[index].vitality_index
      this.fixed3Data.data = [{
        name: '同比',
        value: this.fixed3List[index].on_year
      },
      {
        name: '环比',
        value: this.fixed3List[index].chain
      }]
    },
    fixed3DataChange(e) {
      this.fetchFixed3(e, 3)
    },
    /** ***地方财政活力指数******/
    fetchFixed2(year, type) {
      exponentList({ year: year, type: type }).then(res => {
        this.fixed2List = res.data
        if (res.data.length > 0) this.handleFixed2MouseEnter(0)
        else {
          this.fixed2Data.data = []
          this.fixed2Data.value = 0
        }
      })
    },
    handleFixed2MouseEnter(index) {
      this.fixed2Data.value = this.fixed2List[index].vitality_index
      this.fixed2Data.data = [{
        name: '同比',
        value: this.fixed2List[index].on_year
      },
      {
        name: '环比',
        value: this.fixed2List[index].chain
      }]
    },
    fixed2DataChange(e) {
      this.fetchFixed2(e, 3)
    },
    /** ***查询固定资产投资活力指数******/
    fetchFixed1(year, type) {
      exponentList({ year: year, type: type }).then(res => {
        this.fixed1List = res.data
        if (res.data.length > 0) this.handleFixed1MouseEnter(0)
        else {
          this.fixed1Data.data = []
          this.fixed1Data.value = 0
        }
      })
    },
    handleFixed1MouseEnter(index) {
      this.fixed1Data.value = this.fixed1List[index].vitality_index
      this.fixed1Data.data = [{
        name: '同比',
        value: this.fixed1List[index].on_year
      },
      {
        name: '环比',
        value: this.fixed1List[index].chain
      }]
    },
    fixed1DataChange(e) {
      this.fetchFixed1(e, 1)
    },
    handleMouseEnter(index) {
      this.mouseClass = 'p-left-center-card-1'
      this.mouseIndex = index

      if (index === 0) {
        this.setActiveOne('chengji')
      } else if (index === 1) {
        this.setActiveOne('cangcu')
      } else if (index === 2) {
        this.setActive('business')
      } else if (index === 3) {
        this.setActive('innovation')
      }
    },
    handleMouseLeave(index) {
      this.mouseClass = ''
      this.mouseIndex = null
    },
    showCityInfo() {
      const _this = this
      // 实例化城市查询类
      var citysearch = new AMap.CitySearch()
      // 自动获取用户IP，返回当前城市
      citysearch.getLocalCity(function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.city) {
            var cityinfo = result.city

            // 加载天气查询插件
            AMap.plugin('AMap.Weather', function() {
              // 创建天气查询实例
              var weather = new AMap.Weather()

              // eslint-disable-next-line handle-callback-err
              weather.getLive(cityinfo, function(err, data) {
                _this.weatherCurrent = data
              })
            })
          }
        } else {
          // document.getElementById('info').innerHTML = result.info;
        }
      })
    },
    setActive(type) {
      this.isActive = type // 更新活动的卡片类型
    },
    setActiveOne(type) {
      this.isActiveOne = type // 更新活动的卡片类型
    },
    showTip(type) {
      // if (type === '1') {
      //   this.showTip1 = true
      // } else if (type === '2') {
      //   this.showTip2 = true
      // } else if (type === '3') {
      //   this.showTip3 = true
      // }
    },
    hideTip1(type) { // 隐藏提示
      if (type === '1') {
        this.showTip1 = false
      } else if (type === '2') {
        this.showTip2 = false
      } else if (type === '3') {
        this.showTip3 = false
      }
    },
    changePage(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.screen-wrapper{
  background: url("~@/assets/images/bg.png") no-repeat;
  background-size: cover;
}
.p-con{
  width: 100%;
  background: url("~@/assets/images/bg.png") no-repeat;
  background-size: cover;
}
.weather-box{
  display: flex;
  align-items: flex-start;
  font-weight: 500;
  font-size: 18px;
  color: #D3DDE8;
  margin-right: 30px;
  img{
    display: inline-block;
    width: 29px;
    height: 26px;
  }
}
.p-head{
  background: url("~@/assets/images/head.png") no-repeat;
  background-size: 100%;
  height: 124px;
  width: 100%;
  .headTitle{
    height: 67px;
    left: 50%;
    margin-left: 40%;
    width: 20%;
    background: url("~@/assets/images/p/b0.png") no-repeat center 20px;
    background-size: 100% 47px;
  }
  .headPage{
    margin-left: 2%;
    width: 25%;
    display: flex;
    justify-content: space-between;
    background-size: 100%;
  }
  .headTime{
    width: 98%;
    display: flex;
    justify-content: space-between;
    background-size: 100%;
  }
  .headPage1{
    display: inline-block;
    cursor: pointer;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    height: 40px;
    background: url("~@/assets/images/pageyellow.png") no-repeat center;
    background-size: 100% 40px;
    span{
      word-break: keep-all;
      display: inline-block;
      padding: 0 30px;
    }
  }
  .headPage2{
    background: url("~@/assets/images/pageblue.png") no-repeat;
    background-size: 100% 40px;
  }
  .headPage3{
    font-weight: 400;
    font-size: 18px;
    color: #D3DDE8;
    text-align: center;
  }
}
.p-win{
  display: flex;
  justify-content: space-between;
  padding: 10px 24px 30px 24px;
  width: 100%;
  height: 925px;
}
.p-left{
  background: url("~@/assets/images/p/b1.png") no-repeat;
  background-size: 100% 100%;
  width: 1392px;
  height: 898px;
}
.p-right{
  width: 460px;
}

.p-foot{
  height: 30px;
  background: url("~@/assets/images/p/b6.png") no-repeat;
  background-size: 100% 30px;
}

.card-title{
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0 40px;
}
.active-text{
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  background: linear-gradient(0deg, #68D0FF 0%, #FFFFFF 62.0361328125%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-title-text{
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  background: linear-gradient(0deg, #68D0FF 0%, #FFFFFF 62.0361328125%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p-left-top{
  height: 235px;
  display: flex;
  justify-content: space-between;
  padding: 23px 21px 0;
  .p-left-card{
    height: 100%;
    width: calc(33.33% - 10px);
    background: url("~@/assets/images/p/b2.png") no-repeat;
    background-size: 100% 100%;
    .p-left-card-head{
      padding: 6px 10px;
      display: flex;
      justify-content: space-between;
      .p-left-card-head-text{
        margin-top: 4px;
        background: url("~@/assets/images/p/b8.png") no-repeat;
        background-size: 100% 100%;
        width: 193px;
        height: 34px;
        display: flex;
        align-items: center;
        .img1{
          width: 10px;
          height: 10px;
          margin-right: 10px;
        }
      }
      .p-left-card-head-value{
        background: url("~@/assets/images/p/b11.png") no-repeat;
        background-size: 100% 100%;
        width: 180px;
        height: 32px;
        text-align: center;
        display: flex;
        margin-right: 2px;
        justify-content: center;
        align-items: center;

        font-weight: 400;
        font-size: 12px;
        color: #36C4FF;
        line-height: 34px;
        .p-left-card-head-value-p1{
          font-weight: bold;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 60px;
          background: linear-gradient(0deg, #68D0FF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .p-left-card-head-value-p{
          font-weight: bold;
          font-size: 14px;
          color: #0AFF8F;
          line-height: 60px;
          img{
            margin-right: 2px;
          }
        }
      }
    }
  }
  .p-left-card-2{
    background: url("~@/assets/images/p/b26.png") no-repeat;
    background-size: 100% 100%;
  }
}
.p-left-center{
  height: 325px;
  background: url("~@/assets/images/p/b3.png") no-repeat center;
  background-size: 1038px 100%;
  position: relative;
  .p-left-center-box{
    position: absolute;
    bottom: 42px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .p-left-center-card{
    height: 200px;
    width: 328px;
    background: url("~@/assets/images/p/b9.png") no-repeat;
    background-size: 100% 100%;
    padding: 16px 19px;
  }
  .p-left-center-card-1{
    width: 346px;
    height: 212px;
    background: url("~@/assets/images/p/b4.png") no-repeat;
    background-size: 100% 100%;
  }
  .pc1{
    margin-right: 13px;
  }
  .pc2{
    margin-right: 30px;
  }
  .pc3{
    margin-right: 13px;
  }
  .pc0{
    margin-right: 6px;
  }

  .pc4{
    margin-right: 22px;
    margin-left: -7px;
  }
}
.p-left-bottom{
  height: 277px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  .p-left-bottom-card{
    height: 100%;
    width: 668px;
    background: url("~@/assets/images/p/b5.png") no-repeat;
    background-size: 100% 100%;
    padding: 11px 8px;

    .p-left-bottom-card-tab{
      cursor: pointer;
      height: 34px;
      width: 200px;
      text-align: center;
      line-height: 24px;
      font-weight: 400;
      font-size: 16px;
      color: rgba(54,196,255,0.5);
    }
    .p-left-bottom-card-tab-active{
      background: url("~@/assets/images/p/b15.png") no-repeat;
      background-size: 100% 100%;
    }
    .p-left-bottom-card-type{
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 12px;
      color: rgba(54,196,255,0.5);
      line-height: 35px;
      word-break: keep-all;
      img{
        width: 24px;
        height: 16px;
        margin-right: 4px;
        margin-left: 8px;
      }
    }
  }
}

.p-right-card{
  height: 286px;
  background: url("~@/assets/images/p/b10.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20px;

  .p-right-card-head{
    padding: 2px 6px 0 40px;
    display: flex;
    justify-content: space-between;
    .p-right-card-head-text{
      background: url("~@/assets/images/p/b8.png") no-repeat;
      background-size: 100% 100%;
      width: 193px;
      height: 34px;
      display: flex;
      align-items: center;
      .img1{
        width: 10px;
        height: 10px;
        margin-right: 10px;
      }
    }
  }
}

::v-deep.el-cascader,.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 100px !important;
}
::v-deep .el-date-picker ,.el-popper .custom-date-picker-popup {
  background: aliceblue;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: #18BBFF;
  box-shadow: 0px 0px 20px 0px #0099FF inset;
  height: 30px;
  font-size: 14px;
  color: #FFFFFF;
}
/deep/.el-input__icon{
  line-height: 28px!important;
}
.home-chat-box{
  height: calc(100% - 40px);
}

.table-head{
  display: flex;
  padding: 0 7px 0 10px;
  div{
    text-align: center;
    width: 25%;
    font-weight: 400;
    font-size: 14px;
    color: #36C4FF;
    line-height: 34px;
    opacity: 0.7;
  }
}
.table-container{
  display: flex;
  height: 46px;
  padding: 0 7px 0 10px;
  background: url("~@/assets/images/p/b19.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 4px;
  cursor: pointer;
  div{
    width: 25%;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 9px;
      height: 12px;
      margin-right: 4px;
    }
  }
}
.table-container:hover{
  background: url("~@/assets/images/p/b20.png") no-repeat;
  background-size: 100% 100%;
}

.table-head2,.table-container2{
  div{
    width: 25%;
  }
}
.table-container{
  height: 42px;
}

.bus-head{
  display: flex;
  div{
    text-align: center;
    width: 33%;
    font-weight: 400;
    font-size: 14px;
    color: #36C4FF;
    line-height: 34px;
    opacity: 0.7;
  }
}
.bus-container{
  display: flex;
  align-items: center;
  div{
    width: 33%;
    font-weight: 400;
    font-size: 14px;
    color: rgba(54, 196, 255, 0.7);
    line-height: 34px;
  }
  .bus-bell{
    width: 50px;
    height: 41px;
    background: url("~@/assets/images/p/b22.png") no-repeat center;
    background-size: 35px 35px;
    text-align: center;
    line-height: 41px;

    font-weight: bold;
    font-size: 12px;
    color: #FFFFFF;
  }
  .bus-bell2{
    background: url("~@/assets/images/p/b23.png") no-repeat center;
    background-size: 35px 35px;
  }
}

.name-type{
  padding-right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
  font-size: 12px;
  color: rgba(54, 196, 255, 0.7);
  margin-bottom: 7px;
  .name-type-ball{
    display: flex;
    justify-content: center;
    background: url("~@/assets/images/p/b20.png") no-repeat;
    background-size: 100% 100%;
    height: 42px;
    width: 146px;
    padding-top: 2px;
    .name-type-ball-1{
      width: 35px;
      height: 35px;
      background: url("~@/assets/images/p/b24.png") no-repeat center;
      background-size: 35px 35px;
      text-align: center;

      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 35px;
    }
    .name-type-ball-3{
      width: 35px;
      height: 35px;
      background: url("~@/assets/images/p/b25.png") no-repeat center;
      background-size: 35px 35px;
      text-align: center;

      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 35px;
    }
    .name-type-ball-2{
      text-align: center;
      width: 50px;
      height: 18px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      line-height: normal;
      padding-bottom: 4px;
      border-bottom: 2px dashed rgba(51, 220, 254, 1);
    }
  }
}

.se-info{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-right: 20px;
  .se-info-1{
    font-weight: bold;
    font-size: 14px;
    color: rgba(10, 255, 143, 0.7);
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    img{
      width: 9px;
      height: 12px;
      margin-right: 4px;
    }
  }
  .se-info-2{
    font-weight: 400;
    font-size: 12px;
    color: rgba(54, 196, 255, 0.7);
    margin-bottom: 19px;
  }
  .se-info-3{
    width: 23px;
    height: 1px;
    background: rgba(23, 183, 251, 0.5);
    margin-bottom: 27px;
  }
  .se-info-4{
    font-weight: bold;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
    img{
      width: 9px;
      height: 12px;
      margin-right: 4px;
    }
  }
  .se-info-5{
    font-weight: 400;
    font-size: 12px;
    color: rgba(54, 196, 255, 0.7);
  }
}

.move-body{}
@keyframes textTrans {
  0% {}
  100% {transform: translateY(-50%);}
}
/* 调用动画 */
.move-con .move-body {
  /* //infinite永久调用动画 */
  animation: textTrans 30s linear infinite;
}
/*鼠标划入 停止动画  */
.move-con .move-body:hover {
  animation-play-state: paused;
}
/* 调用动画 */
.move-con2 .move-body2 {
  /* //infinite永久调用动画 */
  animation: textTrans 30s linear infinite;
}
/*鼠标划入 停止动画  */
.move-con2 .move-body2:hover {
  animation-play-state: paused;
}

table-container{}
@keyframes textTrans {
  0% {}
  100% {transform: translateY(-50%);}
}
/* 调用动画 */
.move-con .table-container2 {
  /* //infinite永久调用动画 */
  animation: textTrans 30s linear infinite;
}
/*鼠标划入 停止动画  */
.move-con-con .table-container2:hover {
  animation-play-state: paused;
}
</style>
